<template>
   <div> 
        <div class="fa_1">
            <h4>{{faxian}}</h4>
        </div>
        <div class="fa_2">
            <ul>
                <li v-for="todo in todos"><h4>{{todo.text}}</br><p>{{todo.t}}</p></h4><img src="../img/5.png" alt=""></li>
             
            </ul>
            <div style="clear:both"></div>
        </div>
        <div class="fa_3">
                <img src="../img/6.png" alt="">
        </div>
        <div class="fa_4">
            <div class="qq"> 
                <h4><img src="../img/10.png" alt="">{{q}}</h4>
                <p class="p1">{{w}}</p>
                <p class="p2"></p>
                <p class="p3"></p>
            </div>
        </div>
        <div class="fa_5">
                <ul>
                    <li v-for="tod in lis">
                        <img src="../img/111.png" alt="">
                        <h4>{{tod.li}}</br><span>{{tod.li1}}</span></h4>
                        <p>{{tod.li2}}</p>
                        <h5>{{tod.li3}}</h5>
                    </li>
                   
                </ul>


        </div>
    </div>
</template>
<script>
export default {
    data () {
        return {
            checkList: [],
            faxian: '发现',
            todos: [
                { text: '百元红包',t:'兴业银行联名卡' },
                { text: '百元红包',t:'兴业银行联名卡' },
                { text: '百元红包',t:'兴业银行联名卡' },
                { text: '百元红包',t:'兴业银行联名卡' },
                { text: '百元红包',t:'兴业银行联名卡' },
                { text: '百元红包',t:'兴业银行联名卡' }
            ],
            q:'为你推荐',
            w:'你的口味,我都懂得',
            lis:[
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                {li:'鲜佼鸡蛋+土豆丝+···',li1:'月售412分 好频率95%',li2:'￥9.9',li3:'焦耳川式快餐'},
                
            ]
        }
    },
   
}
</script>
<style>
.fa_1{
    height: 60px;
    background: #01a1ff;
    color:#fff;
    font-size: 20px;
    line-height: 60px;
    border-bottom: 2px solid#ededed;
}
.fa_1 h4 {
    float:left;
    margin-left: 7%;
}


.fa_2 li{
    float:left;
    width:50%;
    height:30%;
    border-bottom: 1px solid#ededed;
    border-right: 1px solid#ededed;
    box-sizing: border-box;
}
.fa_2 li h4{
    float:left;
    padding-top: 15%;
    padding-left: 15%;
    padding-bottom: 7%;
    font-size: 14px;
    color:#e79227;
   
}
.fa_2 li p{
    padding-top: 10%;
    font-size: 12px;
    color:#ccc;
}
.fa_2 li img{
    float:right;
    width: 25%;
    height: 25%;
    padding: 10% 10% 10% 0;
}
.fa_3{
    border-bottom:15px solid#ededed;
    border-top:15px solid#ededed;
}
.fa_3 img{
    width: 100%;
    height: 30%;
}
.fa_4{
    height:25%;


}
.qq{
    margin:0 auto;
    position: relative;


}
.qq h4{
    font-weight: bold;
    padding-top: 10px;
}
.qq img{
    width: 5%;
    height: 5%;
}
.p1{
    padding-top: 10px;
    color:#ccc;
    font-size: 12px;
}
.p2{
    position: absolute;
    width: 5%;
    height: 3%;
    background: #000;
    left:30%;
    top:58%;
}
.p3{
    position: absolute;
    width: 5%;
    height: 3%;
    background: #000;
    left:64%;
    top:58%;
}
.fa_5 ul li{
    float:left;
    width:45%;
    margin:2.5%;
    border:1px solid#ccc;
    box-sizing: border-box;
}
.fa_5 img{
    width:100%;
    height: 75%;    
}
.fa_5 h4 span{
    font-size: 12px;
    color:#ccc;
}
.fa_5 p{
    padding-left: -10%;
    color:red;
    font-size: 14px;


}
.fa_5 h5{
    border-top: 1px solid #ccc;
    padding:5%;
}
</style>